<template>
	<div class="login-wrap">
		<div class="login-container">
			<h1 class="title">管理员登录{{ts}}</h1>
			<el-form>
				<el-form-item>
					<el-input v-model="user.username" placeholder="账号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input type="password" v-model="user.password" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item prop="code">
					<el-input type="text" v-model="user.code" placeholder="验证码">
						<template slot="append">
							<div class="login-code" @click="refreshCode">
								<s-identify :identifyCode="identifyCode"></s-identify>
							</div>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="doLogin" style="width: 100%;" type="primary">登录</el-button>
				</el-form-item>
				<el-link @click="dosjrz" type="primary">商家入驻></el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<el-checkbox v-model="checked">记住密码</el-checkbox>&nbsp;&nbsp;&nbsp;
				<el-link type="primary">忘记密码</el-link>
			</el-form>
		</div>
	</div>
</template>



<script>
	import SIdentify from '../components/SIdentify.vue'
	export default {
		components: {
			SIdentify
		},
		name: 'Login',
		data() {
			return {
				ts: new Date().getTime(),
				user: {
					username: 'admin',
					password: '123',
					code: "",
					checked: true
				},
				// 校验
				rules: {
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}],
					code: [{
						required: true,
						message: "请输入验证码",
						trigger: "blur"
					}]
				},
				identifyCode: "",
				identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",
			};
		},
		methods: {
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			randomNum(min, max) {
				max = max + 1
				return Math.floor(Math.random() * (max - min) + min)
			},
			// 随机生成验证码字符串
			makeCode(data, len) {
				for (let i = 0; i < len; i++) {
					this.identifyCode += data[this.randomNum(0, data.length - 1)]
				}
			},
			doLogin: function() {
				if (this.user.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
					this.$message.error('请填写正确验证码')
					this.refreshCode()
					return
				}

				let url = this.axios.urls.SYS_ADMIN_DOLOGIN;
				this.axios.post(url, this.user).then((response) => {
					console.log(response);
					var data = response.data;
					if (0 === data.code) {
						this.$message({
							message: data.message,
							type: 'success'
						});
						this.$router.push('/Main')
						//将用户名保存到vuex
						this.$store.commit('setUsername', {
							username: this.user.username
						})
					} else {
						this.$message.error(data.message);
					}
				}).catch((response) => {
					console.log(response);
				});

			},
			dosjrz: function() {
				this.$router.push('/HotelInformation')
			}
		},
		created() {
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
		}
	}
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url();
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>
